<template>
	<div>
		<div class="publish-top">
			<div class="left-icon" @click="handleBack"> 
				<img src="../../assets/images/left.png"/>
			</div>
			<p>忘记密码</p>
		</div>
		<div class="forget-content">
			<h1>忘记密码</h1>
			<ul class=" login-list">
				<li>
					<input type="text" name="" id="" value="" placeholder="请输入当前手机号" @change="changePhone"/>
				</li>
				<li>
					<input type="text" name="" id="" value="" placeholder="输入手机验证码" @change="changeCode"/>
					<p @click="handleAut">{{getAuthCodeText}}</p>
				</li>
				<li>
					<input type="text" name="" id="" value="" placeholder="请输入新的密码" @change="changePassword"/>
				</li>
				<li>
					<input type="text" name="" id="" value="" placeholder="确定新的密码" @change="changePassword2"/>
				</li>
			</ul>
			<div class="login" @click="handleConfirm">确定</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios';
	import user from '../../utils/isLogin';
		
	export default{
		data(){
			return{
				phone: '',
				code: '',
				password: '',
				password2: '',
				getAuthCodeText:'获取验证码',
				isDisabled: true,
			}
		},
		created(){
			
			
			let plusReady = ()=>{
				
			}
			if (window.plus) {
		      plusReady();
		    } else {
		      document.addEventListener("plusready", plusReady, false);
		    }
		},
		components:{
			
		},
		methods:{
			handleBack(){
				var h=plus.webview.getWebviewById('forget');
				plus.webview.close(h);			
			},
			changePhone (e){
				this.phone = e.target.value;
			},
			changeCode (e){
				this.code = e.target.value;
			},
			changePassword (e){
				this.password = e.target.value;
			},
			changePassword2 (e){
				this.password2 = e.target.value;
			},
			handleAut (){
				let phone = this.phone;
				let myreg=/^[1][3,4,5,7,8][0-9]{9}$/;  
				if(!myreg.test(phone) || phone == ''){
					plus.nativeUI.toast('手机号格式错误,请重新输入~')
					return;
				}
	        	var count = 60;
	        	let daoTime = setInterval(() => {
	            count--;
           		this.getAuthCodeText = count + '(s)';
                this.isDisabled = false;
	          
	            if (count === 0) {
                    this.getAuthCodeText = '获取验证码';
                    this.isDisabled = true;
	                window.clearInterval(daoTime);
	            }
	        	}, 1000);
		        
				
				axios.post(user.src + '/index/user/get_register_verify' , {
					mobile : phone
				})
				.then(function (res) {
					console.log(res.data);
				})
				.catch(function (error) {
				    console.log(error);
				});
			},
			handleConfirm () {
				let phone = this.phone;
				let code = this.code;
				let password = this.password;
				let pass2 = this.password2;
				let myreg=/^[1][3,4,5,7,8][0-9]{9}$/;  
				if(!myreg.test(phone) || phone == ''){
					plus.nativeUI.toast('手机号格式错误,请重新输入~')
					return;
				}
				if(code == ''){
					plus.nativeUI.toast('请输入验证码~')
					return;
				}
				if(password == '' || pass2 == ''){
					plus.nativeUI.toast('密码不能低于6位~')
					return;
				}
				axios.post( user.src + '/index/user/forgot_password' , {
					mobile : phone,
					verifiy : 123456,
					password : password,
					confirm_password : pass2
				})
				.then((res)=> {
					if(res.data.status == 200){
						var forget =plus.webview.getWebviewById('forget.html');
						plus.webview.close(forget);	
					}
				})
				.catch((error)=> {
				    console.log(error);
				});
			},
		}
	}
	
	
</script>

<style lang='less' scoped>

html,body{
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		background: #f6f6f6;

	}

	*{
		margin: 0;
		padding: 0;
	}
	ul,li{
		list-style: none;
	}
	.publish-top{
		width: 100%;
		height: 60px;
		background:@default-blue;
		box-shadow: 0px 0px 8px 1px #999;
		padding-top: 70px;
		display:flex;				
		.left-icon{
			width: 90px;
			
			img{
				width: 15px;
				height: 26px;
				margin-left: 31px;
			}
		}
		p{		
			width: 80%;
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
		span{
			display: block;
			width: 170px;
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
	}
	.forget-content{
		width: 100%;
		
		h1{
			padding-left: 70px;
			line-height: 160px;
			font-size: 45px;
			color: #333333;
		}
		ul{
			padding: 0 70px;
			margin-bottom: 140px;
			li{
				margin-bottom: 24px;
				padding: 40px 0 10px 0;
				height: 86px;
				border-bottom: 0.1rem solid #cccccc;
				overflow: hidden;
				
				input{
					float: left;
					width: 200px;
					font-size: 24px;
					color: #999999;
					height: 47px;
					border: none;
					outline: none;
					
				}
				p{
					float: right;
					display: block;
					font-size: 24px;
					color: #4581c9;
					text-align: right;
				}
			}
		}
		.login{
			margin: 0 auto 15px;
			width: 615px;
			height: 100px;
			line-height: 100px;
			font-size: 31px;
			font-weight: bold;
			color: #fff;
			background: #00a2ff;
			border-radius: 48px;
			text-align: center;
		}
	}
</style>